<template>
  <van-nav-bar :title="defaultType?$route.meta.title:title"
               :left-arrow="defaultType?$route.meta.leftRrrow:true"
               :border="false"
               @click-left="handleLeft"
               :fixed='fixed'>
    <template #right>
      <img :src="isquit?inQuitImg:quitImg"
           class="quitImg"
           @click="toQuit">
    </template>
  </van-nav-bar>
</template>
<script>
import quitImg from '@/assets/images/close_circle.png'
import inQuitImg from '@/assets/images/inQuit.png'
export default {
  props: {
    defaultType: {
      type: Boolean,
      default: true
    },
    fixed: {
      type: Boolean,
      default: true
    },
    clickLeft: {
      type: Function,
      default: () => { }
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      quitImg,
      inQuitImg,
      isquit: false
    }
  },
  components: {
  },
  mounted () {
  },
  computed: {
  },
  methods: {
    toQuit () {
      // this.isquit = true
      // this.$dialog.confirm({
      //   message: '确认退出？',
      // }).then(() => {
      //   this.isquit = false
      if (process.env.NODE_ENV == 'production') {
        MXWebui.closeWindow()
      } else {
        location.reload();
      }
      // }).catch(() => this.isquit = false)
    },
    handleLeft () {
      if (this.defaultType) {
        if (process.env.NODE_ENV == 'production') {
          MXWebui.closeWindow()
        } else {
          location.reload();
        }
      } else {
        this.clickLeft()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.quitImg {
  width: 44px;
  height: 44px;
}
/deep/ .van-nav-bar {
  height: 80px;
  background: rgba(255, 255, 255, 0);
  &--fixed {
    z-index: 9998;
  }
  .van-icon {
    color: #000;
  }
  &.change {
    background: rgba(255, 255, 255, 1);
    .van-icon {
      color: #000;
    }
    .van-nav-bar__title {
      color: #000;
    }
  }
  &__content {
    height: 80px;
  }
  &__left {
    padding-left: 32px;
  }
  &__arrow {
    font-size: 44px;
    color: #000;
  }
  &__right {
    padding-right: 32px;
  }
  &__title {
    height: 80px;
    font-size: 36px;
    font-weight: 500;
    color: #1f2329;
    line-height: 80px;
  }
}
</style>
